布局简介

• CSS 布局
• 常用布局方法

CSS 布局

• CSS 页面布局技术允许我们拾取网页中的元素，并且控制它们相对正常布局流、周边元素、父容器或者主视口/窗口的位置。
• CSS 布局是指如何将 HTML 元素定位和排列以创建网页的外观和结构。
• CSS 布局发展阶段：
  • 表格布局时代：在早期的网页设计中，网页布局主要依赖 HTML 表格来实现。通过表格的行和列可以比较简单地做出各种布局，但是表格布局不够灵活，仅适用于简单的布局。
  • 技巧性布局时代：随着 CSS 的发展，网页布局逐渐演变为使用 DIV+CSS 来实现。可以通过 DIV 框设置元素的位置，再配合浮动、定位等 CSS 属性调整布局。这比表格布局灵活多了，成为了多年来网页布局的主流方式。
  • 浮动布局时代：浮动布局成为了一个较长时间里 CSS 布局的重要方式。通过 float 属性使元素浮动，配合 margin、padding、overflow 等属性来调整元素位置，可以实现多栏布局等复杂布局。
  • Flexbox 布局时代：Flexbox 是 CSS3 带来的一种新的布局方式，可以让元素在不同屏幕尺寸自适应的变化。通过 flex 容器的一些属性可以方便控制子元素的位置、对齐、顺序等，大大简化了复杂布局的实现。
  • Grid 布局时代：CSS Grid 布局是 CSS 最强大的布局系统，通过在容器上定义网格，元素可以方便地放置在网格的各个区域，实现非常复杂和强大的布局效果。Grid 布局目前得到了很多浏览器的支持，正在成为 CSS 布局的主流。

常用布局方法

• table 表格布局：使用 HTML 表格元素可以进行简单的布局。调整表格的行和列可以控制元素位置。不太灵活但可以兼容旧浏览器。
• float 浮动 + margin 布局：通过 float 属性使元素浮动，可以使其浮动到左侧或右侧。配合 margin、padding、overflow 等属性来调整元素位置，可以实现多栏布局等复杂布局。不太灵活但可以兼容旧浏览器。
• inline-block 布局：通过 display: inline-block 属性可以使元素变成行内块元素，可以设置宽高，可以设置 margin、padding、border 等属性。可以实现多栏布局等复杂布局。不太灵活但可以兼容旧浏览器。
• flexbox 布局：Flex 布局可以使元素具有伸缩性，容器可以智能地按行或列对齐和排列元素。使用 display: flex 定义容器，配合 flex-direction、align-items 等属性调整元素位置。
• grid 布局：通过在容器设置 display: grid 可以使用 Grid 布局。容器被划分为一个个网格单元，元素可以放置在指定的网格内，非常适合进行整体页面的布局。

table 表格布局

表格布局是利用 HTML 的 <table> 标签进行页面布局的方式。

• 利用表格的行和列可以非常直观地进行布局。通过调整行高、列宽、边距等可以方便控制元素位置。
• 表格布局对浏览器的兼容性非常好，所有浏览器都可以正常支持。
• 可以利用表格的 colspan 和 rowspan 属性来实现更灵活的单元格合并。
• 表格布局 Limit 于表格结构，不太灵活，只适合一些较为简单的布局。
• 为了语义正确，表格不应该用于仅仅用于布局，而不包含实际的数据。
• 可以设置 table 布局，但不使用表格的边框、线条等样式，仅利用其布局能力。
• 表头表尾可以利用 thead、tfoot 来快速实现。
• 可以利用 caption 设置表格标题，summary 设置表格摘要。
• 表格可以嵌套，实现更复杂的布局。但过多的表格嵌套会降低可访问性。
• 表格默认是一个块级元素，可以直接设置宽度来控制其宽度。

总之，表格布局功能强大、兼容性好，在不追求语义化的情况下，可以用来实现很多传统布局效果。

float 浮动 + margin 布局

CSS 中的浮动 float 加边距 margin 是一种非常常见的网页布局方式。

• 通过 float 属性将元素设置为 left 左浮动或 right 右浮动，可以使其脱离正常文档流，两侧不会有其他内容。

• 浮动元素会向左或向右浮动，遇到容器边缘或另一个浮动元素才停下。

• 使用 margin 可以精确控制浮动元素和其他元素之间的距离。

• 为了避免浮动元素对后面元素的影响，需要在最后一个浮动元素后面加一个清除浮动的元素。

• 常见的清除浮动方法：

  • 额外 div 设置 clear: both
  • 父元素设置 overflow: hidden 清除浮动
  • 父元素添加 clearfix 类清除浮动

• 利用浮动 + 边距可以很灵活地实现多栏布局，也是很多 CSS 框架的基础。

• 浮动布局需要注意文档流和元素堆叠顺序，一个不小心就可能出现问题。

• 为了更好地控制浮动布局，现在的方法是使用 Flex/Grid 等更先进的布局方式。

总之，掌握浮动 + 边距的布局方式对学习 CSS 布局非常重要，这是创建多栏、定宽布局的基础，但也需要注意它的局限性。

inline-block 布局

inline-block 布局指的是将元素设置为 inline-block 显示类型来进行布局。

• 将元素的 display 属性设置为 inline-block 可以使其既具有块级元素可以设置宽高的特性，又具有内联元素可以并列的特性。
• inline-block 元素之间默认会有空隙，可以通过设置父元素的 font-size 为 0 消除这个空隙。
• inline-block 元素内部可以包含块级元素，相当于将元素设置为内联，但同时保留设置宽高的能力。
• inline-block 元素比浮动元素更稳定，不会产生重叠现象。
• vertical-align 属性可以控制 inline-block 元素的垂直对齐方式。
• inline-block 对内联元素也适用，可以实现内联元素并列但能设置宽高。
• inline-block 布局在列出一组内容时很有用，既可以做到并列，也可以设置大小。

总之，inline-block 布局结合了内联元素和块级元素的特点，是非常有用的一种布局方式，可以实现很多传统布局难以实现的效果。其兼容性也很好，基本所有浏览器都支持。

flexbox 布局

Flexbox 弹性布局是一种非常强大和高效的布局方式。

• 通过 display: flex 可以定义 flex 容器，使其子元素具有灵活布局的能力。
• flex 容器有主轴和交叉轴两个方向，通过 flex-direction 可以改变主轴方向。
• 在主轴方向上，通过 justify-content 控制元素对齐方式; 在交叉轴方向上通过 align-items 控制对齐。
• flex 子元素可以通过 order 改变顺序，通过 flex 属性控制占据空间的多少。
• 可以通过 flex-wrap 实现子元素的换行，配合 align-content 控制换行对齐。
• 通过 flex-basis、flex-grow 和 flex-shrink 控制子元素如何缩放。
• 子元素也可以定义为 flex 容器，实现嵌套的布局。
• flex 布局非常适合实现响应式的界面和动态的布局结构。
• 浏览器支持性非常好，基本上所有现代浏览器都完全支持 Flexbox。
• Flexbox 解决了以前布局方式中的许多问题，是目前最强大灵活的 CSS 布局方案。

综上所述，掌握 Flexbox 是掌握现代 CSS 布局的必备技能，它可以大大提高布局的便捷性和响应性。任何前端工程师都应该全面学习 Flexbox。

grid 布局

Grid 布局是 CSS 中最强大的二维布局系统。

• 在容器上通过 display: grid 来定义网格布局。
• 可以使用 grid-template-columns 和 grid-template-rows 来定义列和行的大小。
• 使用 grid-column 和 grid-row 可以精确控制元素所在的网格位置。
• 使用 grid-gap 可以设置网格间隙，grid-auto-rows 定义隐式网格的行高。
• 使用 grid-auto-flow 控制自动布局算法的方向。
• 使用 align-items 和 justify-items 设置单元格内的内容对齐方式。
• 使用 place-items 是 align-items 和 justify-items 的简写形式。
• 使用 grid-auto-columns 和 grid-auto-rows 用来设置隐式网格的列宽和行高。
• 使用 grid-area 可以为一个元素指定一个名字，作为其显示区域。
• Grid 布局使二维布局变得非常简单，是最强大的 CSS 布局方案。

综上，Grid 布局提供了二维布局能力，可以快速灵活地进行复杂页面的布局，是 CSS 布局的未来方向。但浏览器兼容性还在完善中。